<template>

  <el-card style="box-shadow: none;">
    <div class="container" >

      <div class="row row--top-40" style="display: flex; align-items: center;">
        <div class="col-md-12" style="display: flex; align-items: center;">
          <svg t="1707295744799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="1302" width="30" height="30"><path d="M481.28 204.8c158.35136 0 286.72 128.36864 286.72 286.72 0 70.7584-25.64096 135.53664-68.11648 185.5488l123.12576 123.2896a15.36 15.36 0 1 1-21.72928 21.7088l-122.51136-122.6752A285.73696 285.73696 0 0 1 481.28 778.24c-158.35136 0-286.72-128.36864-286.72-286.72s128.36864-286.72 286.72-286.72z m0 30.72C339.88608 235.52 225.28 350.12608 225.28 491.52s114.60608 256 256 256S737.28 632.91392 737.28 491.52s-114.60608-256-256-256z" fill="#062C3D" p-id="1303"></path><path d="M356.47488 507.4944c12.98432 32.0512 32.78848 57.9584 59.63776 78.1312 27.32032 20.52096 60.53888 34.93888 99.86048 43.17184l-8.3968 40.09984c-44.99456-9.4208-83.7632-26.25536-116.08064-50.52416-32.80896-24.65792-57.22112-56.58624-72.97024-95.49824l37.94944-15.36z" fill="#76cb02" p-id="1304" data-spm-anchor-id="a313x.collections_detail.0.i0.33973a817vAg9o" class="selected"></path></svg>
          <h2 class="row__title" style="margin-left: 10px; justify-content: flex-start;">筛选搜索</h2>
        </div>
      </div>

      <el-form @submit.prevent ref="inputForm" :inline="true" :model="inputForm" class="demo-form-inline" style="margin-left: 20px" >
        <el-row>
          <el-form-item>
            <el-select v-model="value" clearable placeholder="选择商品类型" style="width: 200px;margin-top: 15px" @keyup.enter="searchDataList">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="form-control">
              <input type="text" required v-model="inputForm.commodityName" @keyup.enter="searchDataList"/>
              <label>
                <span style="transition-delay:0ms">输</span><span style="transition-delay:50ms">入</span><span style="transition-delay:100ms">商</span><span style="transition-delay:150ms">品</span><span style="transition-delay:200ms">名</span>
              </label>
            </div >
          </el-form-item>
          <ul class="form-control" style="margin-left: -45px;margin-top: 20px">
            <li class="icon-content" >
              <form>
                <button
                    class="link"
                    data-social="inputDate"
                    type="button"
                    @click="searchDataList"
                >
                  <svg t="1707225141071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                       p-id="1299" width="200" height="200">
                    <path d="M902.174374 942.511058c6.66684 6.66684 15.400758 9.999748 24.133653 9.999748s17.466814-3.332908 24.13263-9.999748c13.33368-13.332656 13.33368-34.932604 0-48.266283L816.820404 760.610194c79.380932-79.128175 124.171044-186.079022 124.171044-299.366182 0-233.349629-189.833533-423.183162-423.183162-423.183162-233.333256 0-423.166789 189.834556-423.166789 423.184185s189.833533 423.183162 423.166789 423.183162c35.750225 0 72.399937-4.933359 108.932991-14.650675 18.23327-4.849448 29.067013-23.532973 24.216541-41.74987-4.833075-18.216897-23.532973-29.049616-41.74987-24.216541-30.815843 8.200776-61.566194 12.350283-91.399663 12.350283-195.700147 0-354.899986-159.216211-354.899986-354.916359s159.199839-354.916359 354.899986-354.916359 354.916359 159.216211 354.916359 354.916359c0 106.899682-47.566342 207.082382-130.516566 274.866185-14.59951 11.932774-16.766872 33.432437-4.833075 48.03297"
                          fill="currentColor" p-id="1300"></path>
                  </svg>
                </button>
              </form>
            </li>
          </ul>
        </el-row>
      </el-form>
    </div>
  </el-card>
  <el-card style="box-shadow: none;margin-top: 20px" >
    <div class="container" >
      <div class="row row--top-40" style="display: flex; align-items: center;">
        <div class="col-md-12" style="display: flex; align-items: center;">
          <svg t="1708411655166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16046" id="mx_n_1708411655166" data-spm-anchor-id="a313x.search_index.0.i10.129b3a81vaR55s"
               width="26" height="26"><path d="M764.945067 915.933867H259.054933a95.675733 95.675733 0 0 1-95.573333-95.573334v-590.165333a95.675733 95.675733 0 0 1 95.573333-95.573333H334.506667a27.306667 27.306667 0 0 1 0 54.613333h-75.451734a40.96 40.96 0 0 0-40.96 40.96v590.165333a40.96 40.96 0 0 0 40.96 40.96h505.890134a40.96 40.96 0 0 0 40.96-40.96v-590.165333a40.96 40.96 0 0 0-40.96-40.96h-75.3664a27.306667 27.306667 0 0 1 0-54.613333h75.3664a95.675733 95.675733 0 0 1 95.573333 95.573333v590.165333a95.675733 95.675733 0 0 1-95.573333 95.573334z" fill="#464545" p-id="16047" data-spm-anchor-id="a313x.search_index.0.i9.129b3a81vaR55s" class="selected"></path><path d="M281.992533 404.258133a23.978667 23.978667 0 0 1-2.696533-0.136533c-0.8704 0-1.706667-0.221867-2.645333-0.392533s-1.706667-0.392533-2.594134-0.648534-1.706667-0.5632-2.5088-0.904533-1.706667-0.733867-2.423466-1.143467-1.553067-0.887467-2.286934-1.365333-1.467733-1.041067-2.167466-1.604267-1.348267-1.160533-1.979734-1.792a27.477333 27.477333 0 0 1-8.004266-19.3024 23.586133 23.586133 0 0 1 0.136533-2.696533c0.085333-0.887467 0.221867-1.706667 0.392533-2.645333a23.1424 23.1424 0 0 1 0.6656-2.594134c0.256-0.853333 0.5632-1.706667 0.887467-2.525866s0.733867-1.621333 1.143467-2.4064 0.887467-1.553067 1.3824-2.304 1.024-1.467733 1.5872-2.1504a25.122133 25.122133 0 0 1 1.809066-1.9968c0.631467-0.631467 1.297067-1.2288 1.979734-1.809067s1.416533-1.092267 2.167466-1.5872a23.773867 23.773867 0 0 1 2.286934-1.365333 26.112 26.112 0 0 1 2.423466-1.143467c0.8192-0.341333 1.706667-0.648533 2.5088-0.904533s1.706667-0.477867 2.594134-0.648534a23.552 23.552 0 0 1 2.645333-0.392533 25.736533 25.736533 0 0 1 5.376 0 22.9888 22.9888 0 0 1 2.645333 0.392533 27.0848 27.0848 0 0 1 5.12 1.553067 29.252267 29.252267 0 0 1 4.7104 2.5088 24.951467 24.951467 0 0 1 2.1504 1.5872c0.699733 0.580267 1.365333 1.1776 1.9968 1.809067a25.122133 25.122133 0 0 1 1.809067 1.9968c0.5632 0.682667 1.092267 1.416533 1.5872 2.1504a26.350933 26.350933 0 0 1 1.365333 2.304 25.8048 25.8048 0 0 1 1.143467 2.4064 28.78464 28.78464 0 0 1 1.570133 5.12c0.187733 0.887467 0.3072 1.706667 0.392534 2.645333s0.136533 1.706667 0.136533 2.696533 0 1.792-0.136533 2.679467-0.221867 1.706667-0.392534 2.645333-0.4096 1.706667-0.6656 2.594134A25.821867 25.821867 0 0 1 307.2 387.413333a26.112 26.112 0 0 1-1.143467 2.423467 23.773867 23.773867 0 0 1-1.365333 2.286933 25.224533 25.224533 0 0 1-1.5872 2.167467c-0.5632 0.682667-1.1776 1.365333-1.809067 1.9968a29.678933 29.678933 0 0 1-4.1472 3.413333c-0.733867 0.477867-1.518933 0.938667-2.304 1.365334s-1.5872 0.802133-2.4064 1.143466-1.706667 0.631467-2.525866 0.904534a26.197333 26.197333 0 0 1-2.594134 0.648533c-0.8704 0.170667-1.706667 0.3072-2.645333 0.392533a23.483733 23.483733 0 0 1-2.679467 0.1024zM281.992533 568.32a27.5456 27.5456 0 0 1-19.3024-7.9872c-0.631467-0.631467-1.245867-1.314133-1.809066-1.9968s-1.092267-1.416533-1.5872-2.167467-0.955733-1.501867-1.3824-2.286933a29.986133 29.986133 0 0 1-2.030934-4.932267c-0.273067-0.853333-0.477867-1.706667-0.6656-2.594133s-0.3072-1.706667-0.392533-2.645333-0.136533-1.792-0.136533-2.696534 0-1.792 0.136533-2.679466 0.221867-1.706667 0.392533-2.645334 0.392533-1.706667 0.6656-2.594133a26.146133 26.146133 0 0 1 0.904534-2.525867 25.6 25.6 0 0 1 1.1264-2.4064 27.921067 27.921067 0 0 1 2.9696-4.4544 25.122133 25.122133 0 0 1 1.809066-1.9968 27.306667 27.306667 0 0 1 38.6048 0 25.122133 25.122133 0 0 1 1.809067 1.9968c0.5632 0.682667 1.092267 1.416533 1.5872 2.1504a24.046933 24.046933 0 0 1 1.365333 2.304 25.8048 25.8048 0 0 1 1.143467 2.4064 26.146133 26.146133 0 0 1 0.904533 2.525867c0.256 0.853333 0.477867 1.706667 0.6656 2.594133s0.3072 1.706667 0.392534 2.645334 0.136533 1.792 0.136533 2.679466 0 1.706667-0.136533 2.696534-0.221867 1.706667-0.392534 2.645333-0.4096 1.706667-0.6656 2.594133a25.821867 25.821867 0 0 1-0.904533 2.5088 26.112 26.112 0 0 1-1.143467 2.423467 23.773867 23.773867 0 0 1-1.365333 2.286933c-0.494933 0.750933-1.024 1.467733-1.5872 2.167467s-1.1776 1.365333-1.809067 1.9968a27.5456 27.5456 0 0 1-19.3024 7.9872zM281.992533 732.279467c-0.887467 0-1.706667 0-2.696533-0.136534s-1.706667-0.221867-2.645333-0.392533-1.706667-0.4096-2.594134-0.6656-1.706667-0.5632-2.5088-0.904533a26.112 26.112 0 0 1-2.423466-1.143467 23.773867 23.773867 0 0 1-2.286934-1.365333c-0.750933-0.494933-1.467733-1.024-2.167466-1.5872s-1.348267-1.1776-1.979734-1.809067a25.122133 25.122133 0 0 1-1.809066-1.9968 27.921067 27.921067 0 0 1-4.113067-6.8608 26.043733 26.043733 0 0 1-0.887467-2.525867 21.947733 21.947733 0 0 1-0.6656-2.577066c-0.170667-0.887467-0.3072-1.706667-0.392533-2.6624a26.368 26.368 0 0 1 0-5.358934c0.085333-0.887467 0.221867-1.706667 0.392533-2.6624a23.1424 23.1424 0 0 1 0.6656-2.594133c0.256-0.836267 0.546133-1.706667 0.887467-2.5088s0.733867-1.706667 1.143467-2.423467 0.887467-1.553067 1.3824-2.286933 1.024-1.467733 1.5872-2.167467 1.1776-1.365333 1.809066-1.9968 1.297067-1.2288 1.979734-1.792 1.416533-1.109333 2.167466-1.604266 1.501867-0.938667 2.286934-1.365334 1.604267-0.802133 2.423466-1.143466 1.706667-0.631467 2.5088-0.887467 1.706667-0.477867 2.594134-0.6656 1.706667-0.3072 2.645333-0.392533a25.736533 25.736533 0 0 1 5.376 0c0.887467 0.085333 1.706667 0.221867 2.6624 0.392533a25.924267 25.924267 0 0 1 2.577067 0.6656c0.853333 0.256 1.706667 0.5632 2.525866 0.887467s1.706667 0.733867 2.423467 1.143466 1.553067 0.887467 2.286933 1.365334a29.678933 29.678933 0 0 1 4.1472 3.413333c0.631467 0.631467 1.245867 1.314133 1.809067 1.9968s1.092267 1.416533 1.5872 2.167467a23.773867 23.773867 0 0 1 1.365333 2.286933A26.112 26.112 0 0 1 307.2 694.613333c0.341333 0.8192 0.648533 1.706667 0.904533 2.5088s0.477867 1.706667 0.648534 2.594134a23.893333 23.893333 0 0 1 0.4096 2.6624c0 0.887467 0.136533 1.792 0.136533 2.679466s0 1.792-0.136533 2.679467a23.893333 23.893333 0 0 1-0.4096 2.6624 25.856 25.856 0 0 1-0.648534 2.577067 26.146133 26.146133 0 0 1-0.904533 2.525866 25.8048 25.8048 0 0 1-1.143467 2.4064 24.046933 24.046933 0 0 1-1.365333 2.304c-0.494933 0.733867-1.024 1.467733-1.5872 2.1504a26.965333 26.965333 0 0 1-5.956267 5.393067 23.773867 23.773867 0 0 1-2.286933 1.365333 27.665067 27.665067 0 0 1-4.949333 2.048c-0.836267 0.256-1.706667 0.477867-2.577067 0.6656s-1.706667 0.3072-2.6624 0.392534-1.792 0.0512-2.679467 0.0512zM604.7744 404.2752H361.813333a27.306667 27.306667 0 1 1 0-54.613333h242.961067a27.306667 27.306667 0 0 1 0 54.613333zM604.7744 568.32H361.813333a27.306667 27.306667 0 1 1 0-54.613333h242.961067a27.306667 27.306667 0 0 1 0 54.613333zM604.7744 732.279467H361.813333a27.306667 27.306667 0 0 1 0-54.613334h242.961067a27.306667 27.306667 0 0 1 0 54.613334zM750.062933 404.2752h-63.266133a27.306667 27.306667 0 1 1 0-54.613333h63.266133a27.306667 27.306667 0 0 1 0 54.613333zM750.062933 568.32h-63.266133a27.306667 27.306667 0 0 1 0-54.613333h63.266133a27.306667 27.306667 0 0 1 0 54.613333zM750.062933 732.279467h-63.266133a27.306667 27.306667 0 0 1 0-54.613334h63.266133a27.306667 27.306667 0 0 1 0 54.613334zM669.098667 242.6368H354.986667a47.786667 47.786667 0 0 1-47.786667-47.786667V149.026133a47.786667 47.786667 0 0 1 47.786667-47.786666h314.197333a47.786667 47.786667 0 0 1 47.786667 47.786666v45.824a47.786667 47.786667 0 0 1-47.872 47.786667z m-307.370667-54.613333h300.544V155.8528H361.813333z" fill="#76cb02" p-id="16048" data-spm-anchor-id="a313x.search_index.0.i11.129b3a81vaR55s" class=""></path></svg>
          <h2 class="row__title" style="margin-left: 10px; justify-content: flex-start;">数据列表</h2>
        </div>
      </div>
      <div class="row row--top-20">
        <div class="col-md-12">
          <div class="table-container">
            <!--3個按鈕-->
            <div>
              <ul class="example-1">
                <div style="margin-bottom: -28px">
                  <li class="icon-content" @click="addData">
                    <a
                        class="link"
                        data-social="addData"
                    >
                      <svg t="1707204592900" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                           p-id="1347" width="200" height="200">
                        <path d="M512 64q95.68 0 182.496 37.152t149.664 100 100 149.664 37.152 182.496-37.152 182.496-100 149.664-149.664 100-182.496 37.152-182.496-37.152-149.664-100-100-149.664-37.152-182.496 37.152-182.496 100-149.664 149.664-100 182.496-37.152zM512 149.344q-78.016 0-149.152 30.496t-122.496 81.824-81.824 122.496-30.496 149.152 30.496 149.152 81.824 122.496 122.496 81.824 149.152 30.496 149.152-30.496 122.496-81.824 81.824-122.496 30.496-149.152-30.496-149.152-81.824-122.496-122.496-81.824-149.152-30.496zM512 320q17.664 0 30.176 12.512t12.512 30.176l0 128 128 0q17.664 0 30.176 12.512t12.512 30.176-12.512 30.176-30.176 12.512l-128 0 0 128q0 17.664-12.512 30.176t-30.176 12.512-30.176-12.512-12.512-30.176l0-128-128 0q-17.664 0-30.176-12.512t-12.512-30.176 12.512-30.176 30.176-12.512l128 0 0-128q0-17.664 12.512-30.176t30.176-12.512z"
                              fill="currentColor" p-id="1348"></path></svg>
                    </a>
                    <div class="addTip">新增商品</div>
                  </li>
                </div>
                <div style="margin-bottom: -28px">
                  <li class="icon-content" @click="openWindow">
                    <a
                        class="link"
                        data-social="delData"
                    >
                      <svg t="1707204680847" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                           p-id="1568" width="200" height="200">
                        <path d="M512 64q95.68 0 182.496 37.152t149.664 100 100 149.664 37.152 182.496-37.152 182.496-100 149.664-149.664 100-182.496 37.152-182.496-37.152-149.664-100-100-149.664-37.152-182.496 37.152-182.496 100-149.664 149.664-100 182.496-37.152zM512 149.344q-78.016 0-149.152 30.496t-122.496 81.824-81.824 122.496-30.496 149.152 30.496 149.152 81.824 122.496 122.496 81.824 149.152 30.496 149.152-30.496 122.496-81.824 81.824-122.496 30.496-149.152-30.496-149.152-81.824-122.496-122.496-81.824-149.152-30.496zM341.344 490.656l341.344 0q17.664 0 30.176 12.512t12.512 30.176-12.512 30.176-30.176 12.512l-341.344 0q-17.664 0-30.176-12.512t-12.512-30.176 12.512-30.176 30.176-12.512z"
                              fill="currentColor" p-id="1569"></path></svg>
                    </a>
                    <div class="delTip">批量删除</div>
                  </li>
                </div>
              </ul>
            </div>

            <!-- 清空选项 -->
            <el-button type="text" @click="toggleSelection()" style="margin-top: 10px">
              清空选项
            </el-button>
            <!-- 数据表单 -->
            <el-table :data="dataList"
                      style="width: 100%;margin-top: 10px"
                      ref="multipleTable"
                      @selection-change="handleSelectionChange"
                      @header-contextmenu="cellClick"
                      :row-class-name="tableRowClassName">
              <el-table-column type="selection" align="center" class="tui-checkbox "/>
              <el-table-column fixed prop="commodityId" align="center" width="50px"/>
              <el-table-column fixed label="商品名称" prop="commodityName" align="center" width="140">
                <template #default="scope">
                  <el-input type="text" v-model="scope.row.commodityName" v-show="scope.row.iseditor" class="input-center" />
                  <span v-show="!scope.row.iseditor">{{scope.row.commodityName}}</span>
                </template>
              </el-table-column>
              <el-table-column label="商品类型" prop="category" width="140" align="center">
                <template #default="scope">
                  <el-select v-model="scope.row.category" v-show="scope.row.iseditor" placeholder="" clearable>
                    <el-option
                        v-for="item in stateOptions"
                        :key="item.stateValue"
                        :label="item.label"
                        :value="item.stateValue">
                    </el-option>
                  </el-select>
                  <div>
                    <el-text v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.category === 1">学习用品</el-text>
                    <el-text v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.category === 2">生活用品</el-text>
                    <el-text v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.category === 3" >优惠券</el-text>
                    <el-text v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.category === 4" >虚拟装饰物</el-text>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="所需积分" prop="pointsRequired" align="center" width="140">
                <template #default="scope">
                  <el-input type="text" v-model="scope.row.pointsRequired" v-show="scope.row.iseditor" />
                  <span v-show="!scope.row.iseditor">{{scope.row.pointsRequired}}</span>
                </template>
              </el-table-column>
              <el-table-column label="库存" prop="stock" align="center" width="140">
                <template #default="scope">
                  <el-input type="text" v-model="scope.row.stock" v-show="scope.row.iseditor" />
                  <span v-show="!scope.row.iseditor">{{scope.row.stock}}</span>
                </template>
              </el-table-column>
              <el-table-column label="商品图片" align="center" prop="admissionNotice" width="140">
                <template #default="scope">
                  <el-text class="mx-1" v-if="!scope.row.imageUrl&&!scope.row.iseditor"><el-tag type="danger">未上传</el-tag></el-text>
                  <el-button type="text" v-if="scope.row.imageUrl&&!scope.row.iseditor" @click="getCommodityData(scope.row)" :class="['custom-button']">查看图片</el-button>
                  <el-upload
                      v-model="scope.row.imageUrl"
                      v-show="scope.row.iseditor"
                      class="avatar-uploader"
                      :action="'/api/pointsMallManage/uploadCommodity'"
                      :show-file-list="false"
                      :on-success="handleCommodityPicSuccess"
                      :before-upload="beforeCommodityPicUpload"
                      :data="{commodityId: scope.row.commodityId}">
                    <el-button type="text">上传图片</el-button>
                  </el-upload>
                </template>
              </el-table-column>
              <el-table-column label="兑换说明" prop="description" align="center" width="140">
                <template #default="scope">
                  <el-input type="text" v-model="scope.row.description" v-show="scope.row.iseditor" />
                  <el-popover
                      placement="top-start"
                      title="商品详情"
                      width="200"
                      trigger="hover"
                      :content="scope.row.description"
                      v-show="!scope.row.iseditor&&scope.row.description"
                  >
                    <template #reference>
                      <span>{{ scope.row.description.slice(0, 6) + '...' }}</span>
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="createdAt" align="center" width="200px"/>
              <el-table-column label="更新时间" prop="updatedAt" align="center" width="200px"/>
              <el-table-column fixed="right" align="center" width="120px">
                <template #default="scope">
                  <!--編輯用戶按鈕-->
                  <svg version="1.1" class="table-row__edit" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                       viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;"
                       xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"
                       v-if="scope.row.showEditor" @click="edit(scope.row)"><g>	<g>
                    <path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>
		<path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>
                    <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                  <!--保存信息按鈕-->
                  <svg t="1707127122109" class="table-row__edit" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="6090"
                       v-if="scope.row.isEditor" @click="saves(scope.row)">
                    <path d="M896 0l-896 0 0 1024 1024 0 0-896-128-128zM512 128l128 0 0 256-128 0 0-256zM896 896l-768 0 0-768 64 0 0 320 576 0 0-320 74.97728 0 53.02272 53.02272 0 714.97728z" fill="#01b9d1" p-id="6091"></path></svg>
                  <!--刪除用戶按鈕-->
                  <el-popconfirm
                      confirm-button-text="确定"
                      cancel-button-text="取消"
                      icon-color="#F56C6C"
                      title="确定要删除该商品吗?"
                      @confirm="deleteUser"
                      style="margin-left: 20px"
                  >
                    <template #reference>
                      <el-icon color="#409EFC" style="margin-top: 10px;margin-left:10px" @click="getDelData(scope.row)" v-if="!scope.row.isAdd">
                        <svg data-toggle="tooltip" data-placement="bottom" title="Delete" version="1.1"
                             class="table-row__bin" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                             viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g>	<g>		<path d="M436,60h-90V45c0-24.813-20.187-45-45-45h-90c-24.813,0-45,20.187-45,45v15H76c-24.813,0-45,20.187-45,45v30    c0,8.284,6.716,15,15,15h16.183L88.57,470.945c0.003,0.043,0.007,0.086,0.011,0.129C90.703,494.406,109.97,512,133.396,512    h245.207c23.427,0,42.693-17.594,44.815-40.926c0.004-0.043,0.008-0.086,0.011-0.129L449.817,150H466c8.284,0,15-6.716,15-15v-30    C481,80.187,460.813,60,436,60z M196,45c0-8.271,6.729-15,15-15h90c8.271,0,15,6.729,15,15v15H196V45z M393.537,468.408    c-0.729,7.753-7.142,13.592-14.934,13.592H133.396c-7.792,0-14.204-5.839-14.934-13.592L92.284,150h327.432L393.537,468.408z     M451,120h-15H76H61v-15c0-8.271,6.729-15,15-15h105h150h105c8.271,0,15,6.729,15,15V120z" style="fill: rgb(158, 171, 180);"></path>	</g></g><g>	<g>		<path d="M256,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C271,186.716,264.284,180,256,180z" style="fill: rgb(158, 171, 180);"></path>	</g></g><g>	<g>		<path d="M346,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C361,186.716,354.284,180,346,180z" style="fill: rgb(158, 171, 180);"></path>	</g></g><g>	<g>		<path d="M166,180c-8.284,0-15,6.716-15,15v212c0,8.284,6.716,15,15,15s15-6.716,15-15V195C181,186.716,174.284,180,166,180z" style="fill: rgb(158, 171, 180);"></path>	</g></g><g></g><g></g><g></g><g></g><g></g><g></g>
                          <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
                          </svg>
                      </el-icon>
                    </template>
                  </el-popconfirm>
                  <!--保留添加信息按鈕-->
                  <svg t="1707123601012" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                       p-id="1034" class="table-row__edit"
                       v-if="scope.row.isAdd" @click="saveAdd(scope.row)" >
                    <path d="M896 0l-896 0 0 1024 1024 0 0-896-128-128zM512 128l128 0 0 256-128 0 0-256zM896 896l-768 0 0-768 64 0 0 320 576 0 0-320 74.97728 0 53.02272 53.02272 0 714.97728z" fill="#01b9d1" p-id="6091"></path></svg>
                  <!--刪除添加按鈕 -->
                  <svg t="1707130365636" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="8127" width="15" height="15"
                       style="margin-top: 10px;margin-left:10px"
                       v-if="scope.row.isAdd" @click="del(scope.row)"><path d="M170.666667 42.666667l682.666667 0q52.992 0 90.496 37.504t37.504 90.496l0 682.666667q0 52.992-37.504 90.496t-90.496 37.504l-682.666667 0q-52.992 0-90.496-37.504t-37.504-90.496l0-682.666667q0-52.992 37.504-90.496t90.496-37.504zM853.333333 128l-682.666667 0q-17.664 0-30.165333 12.501333t-12.501333 30.165333l0 682.666667q0 17.664 12.501333 30.165333t30.165333 12.501333l682.666667 0q17.664 0 30.165333-12.501333t12.501333-30.165333l0-682.666667q0-17.664-12.501333-30.165333t-30.165333-12.501333zM632.661333 348.330667q17.664 0 30.336 12.672t12.672 30.336-12.672 30.336l-90.666667 90.325333 90.666667 90.325333q12.672 12.672 12.672 30.336t-12.672 30.165333-30.336 12.501333-29.994667-12.330667l-90.666667-90.666667-90.666667 90.666667q-11.989333 12.330667-29.994667 12.330667-18.346667 0-30.506667-12.16t-12.16-30.506667q0-18.005333 12.330667-30.336l90.666667-90.325333-90.666667-90.325333q-12.330667-12.330667-12.330667-30.336 0-17.664 12.501333-30.336t30.165333-12.672q18.005333 0 29.994667 12.672l90.666667 90.666667 90.666667-90.666667q12.672-12.672 29.994667-12.672z" fill="#F56C6C" p-id="8128"></path></svg>
                </template>
              </el-table-column>
              <template v-slot:empty>
                <el-empty image-size="80"></el-empty>
              </template>
            </el-table>
            <div class="block">
              <!-- 页号 -->
              <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                <el-pagination
                    v-model:current-page="pageIndex"
                    v-model:page-size="pageSize"
                    :page-sizes="[5,10,15, 20]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalPage"
                    @size-change="sizeChangeHandle"
                    @current-change="CurrentChangeHandle"
                    style="margin-top: 30px"/>
              </el-config-provider>
            </div>
          </div>
        </div>
      </div>
    </div>

  </el-card>

  <!-- 确认删除弹窗 -->
  <div>
    <el-dialog
        v-model="delDialogVisible"
        title="提示"
        center
        width="20%"
        :custom-class="'rounded-dialog'"
    >

      <el-text class="mx-2" style="margin-left: 10px">此操作将永久删除该商品, 是否继续?</el-text>
      <template #footer>
                <span class="dialog-footer" >
                  <el-button type="primary"  style="margin-bottom: 10px" @click="deleteSelection">确定</el-button>
                  <el-button type="primary" plain style="margin-bottom: 10px" @click="this.delDialogVisible=false">取消</el-button>
                </span>
      </template>
    </el-dialog>
  </div>

  <!-- 商品顯示 -->
  <div>
    <el-dialog
        v-model="commodityVisible"
        center
        width="30%"
    >
      <el-main>
        <div class="block">
          <el-image v-if="commodityRouter" :src="commodityRouter"></el-image>
        </div>
      </el-main>
    </el-dialog>
  </div>

</template>

<script>
import axios from 'axios';
import {ElMessage} from "element-plus";
import moment from 'moment';

export default{
  name: "commodityManagement",
  data() {
    return {
      // 页面展示的数据集合
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      genderText:"",
      stateText:"",
      politicsStatusText:"",
      multipleSelection: [],
      dataForm: {
        commodityId: 0, commodityName: '', category: 0, pointsRequired:0,
        stock: 0, imageUrl: '', description: '', createdAt: '', updatedAt: ''
      },
      getState:"",
      delData:{
        commodityId:0
      },
      inputNumber:'',
      stateOptions:[{stateValue: 1, label: '学习用品'}, {stateValue: 2, label: '生活用品'},
        {stateValue: 3, label: '优惠券'}, {stateValue: 4, label: '虚拟装饰物'}],
      stateValue: '',
      value1: '',
      value2: '',
      delDialogVisible:false,  //批量删除用户彈窗
      // 搜索框内容
      inputForm:{
        commodityName: null,
      },
      options: [
        {value: 1, label: '学习用品'}, {value: 2, label: '生活用品'},
        {value: 3, label: '优惠券'}, {value: 4, label: '虚拟装饰物'}],
      value: '',
      commodityVisible:false,
      commodityRouter:null
    }
  },
  methods: {
    rowClassName({ row }) {
      console.log("當前狀態", row.state)
      if(row.state === 1){
        return 'warning-row';
      }
      return '';
    },
    /*顯示所有數據*/
    // 改变数组大小
    sizeChangeHandle(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;

      if(this.inputForm!==null||this.value!=null){
        this.searchDataList();
      }
      else{
        this.getDataList();
      }
    },
    // 改变当前页号
    CurrentChangeHandle(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.dataList = [];
      if(this.inputForm!==null||this.value!=null){
        this.searchDataList();
      }
      else{
        this.getDataList();
      }
    },
    /*表格數據顯示*/
    //0.分页方法
    getPageInfo(pageSize, pageNum) {
      return {
        "pageSize": pageSize,
        "pageNum": pageNum
      }
    },
    //1.查询所有数据
    async getDataList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize, this.pageIndex);
        console.log(pageInfo);

        const res = await axios.post('/pointsMallManage/getCommodityList', pageInfo);

        console.log(res);

        if (res.status === 200) {
          this.dataList = res.data.data.list.map(item => {
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取表单数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取表单数据失败');
      }
    },
    tableRowClassName({row,columnIndex}) {
      console.log(row.state);
      console.log(columnIndex);
      if(row.state === 3){
        return 'warning-row';
      }
      else return "";
    },
    /*查詢數據*/
    //0.定義查詢用户信息
    searchCommodityInfo(pageSize,pageNum,commodityName,category){
      return {
        "pageSize": pageSize, "pageNum": pageNum,"commodityName": commodityName, "category":category
      };
    },
    //1.查询数据
    async searchDataList() {
      try {
        const commodityName = this.inputForm.commodityName;
        const value = this.value;

        const searchData = this.searchCommodityInfo(this.pageSize, this.pageIndex,commodityName,value);
        if (commodityName||value) {
          const res = await axios.post('/pointsMallManage/searchCommodityList', searchData);
          console.log("檢索返回值",res.status);
          if (res.status === 200) {
            this.dataList = res.data.data.list;

            this.totalPage = res.data.data.total;
          } else {
            console.error('Error fetching data:', res.statusText);
            ElMessage('获取表单数据失败');
          }
        } else {
          //  ElMessage('请输入搜索条件');
          this.getDataList();
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('出错了');
        this.getDataList();
      }
    },

    /*批量刪除*/
    //0.清空选项按钮
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //1.确认删除弹窗
    openWindow(){
      if(this.multipleSelection.length > 0 ){
        this.delDialogVisible = true;
      }else{
        ElMessage({
          showClose: true,
          message: '请先选择要删除的商品',
          type: 'warning',
        })
      }
    },
    //2.批量删除
    async deleteSelection(){
      try {
        const res = await axios.post('/pointsMallManage/batchDeleteCommodityList',this.multipleSelection);

        if (res.status === 200) {
          ElMessage({
            message: '批量删除商品信息成功',
            type: 'success',
          }),this.delDialogVisible=false,
              this.getDataList()
        }
        else{
          console.error('Error fetching data:', res.statusText);
          ElMessage({
            showClose: true,
            message: '删除商品失败',
            type: 'error',
          }),
              this.getDataList()
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }

    },
    /* 删除商品*/
    //0.定義删除商品信息
    delDelInfo(commodityId){
      return {
        "commodityId": commodityId
      };
    },
    //1.获取该行数据
    getDelData(item){
      this.delData = {
        commodityId: item.commodityId
      }
      console.log('Button clicked for row:', this.delData.commodityId);
    },
    //2.删除商品
    async deleteUser(){
      const delInfo = this.delDelInfo(this.delData.commodityId);
      try {
        const res = await axios.post('/pointsMallManage/deleteCommodityList',delInfo);

        if (res.status === 200) {
          ElMessage({
            message: '删除商品成功',
            type: 'success',
          }),
              this.getDataList()
        }
        else{
          console.error('Error fetching data:', res.statusText);
          ElMessage({
            showClose: true,
            message: '删除商品失败',
            type: 'error',
          })
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }
    },

    /*編輯商品*/
    //0.編輯按鈕
    edit(row) {
      row.iseditor = true;
      row.isEditor = true;
      row.showEditor = false;

    },
    //1.定義删除商品信息
    editUserInfo(commodityId,commodityName,category,pointsRequired,stock,description){
      return {
        "commodityId":commodityId, "commodityName": commodityName, "category": category,
        "pointsRequired":pointsRequired, "stock":stock, "description": description
      };
    },
    //2.保存修改
    async saves(row) {
      this.dataForm = {
        commodityId: row.commodityId,commodityName: row.commodityName,category: row.category,
        pointsRequired: row.pointsRequired,stock:row.stock,description:row.description
      }
      let commodityId = row.commodityId;
      let commodityName = row.commodityName;
      let category = row.category;
      let pointsRequired = row.pointsRequired;
      let stock = row.stock;
      let description = row.description;
      const editInfo = this.editUserInfo(commodityId,commodityName,category,pointsRequired,stock,description);
      try {
        const res = await axios.post('/pointsMallManage/updateCommodityList',editInfo);

        console.log('获取res数据:',res);
        if (res.data.code === 200) {
          ElMessage({
            message: '修改商品信息成功',
            type: 'success',
          });
          this.getDataList();
        }if (res.data.code === 400) {
          this.$message.error(res.data);
          this.getDataList();
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }
      row.iseditor = false;
      row.isEditor = false;
      row.showEditor = true;

    },
    formatBirthday(birthday) {
      return moment(birthday).format('YYYY-M-D');
    },
    del(row){
      row.iseditor = false;
      row.isAdd = false;
      row.showEditor = true;

      this.getDataList();

    },
    /*新增商品*/
    //0.新增行
    addRow(){
      const row = {
        iseditor: true,
        isAdd:true
      };
      this.dataList.push(row)
    },
    async saveAdd(row){
      this.dataForm = {
        commodityId: row.commodityId,commodityName: row.commodityName,category: row.category,
        pointsRequired: row.pointsRequired,stock:row.stock,description:row.description
      }
      let commodityId = row.commodityId;
      let commodityName = row.commodityName;
      let category = row.category;
      let pointsRequired = row.pointsRequired;
      let stock = row.stock;
      let description = row.description;

      const addInfo = this.editUserInfo(commodityId,commodityName,category,pointsRequired,stock,description);
      try {
        const res = await axios.post('/pointsMallManage/addCommodityList',addInfo);

        if (res.status === 200) {
          ElMessage({
            message: '商品添加成功',
            type: 'success',
          }), this.dialogVisible = false;
          this.getDataList();
          this.addForm = { userName: '', roleId: '', email: '', createBy: '' };
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage({
            showClose: true,
            message: '商品添加失败',
            type: 'error',
          })
        }}catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }
    },
    /*顯示商品圖片*/
    async getCommodityData(item){
      this.commodityId=item.commodityId;
      this.commodityVisible = true;

      const res = await axios.post('/pointsMallManage/findCommodityPic/'+item.commodityId)
      console.log(res.data.data,'图片地址')

      if (res.data.data != null) {
        this.commodityRouter = res.data.data
      }else{
        ElMessage({
          message: '出错了',
        })
      }
    },
    //頭像上傳
    handleCommodityPicSuccess(res) {
      if (res && res.code === 200) {
        this.$message.success('上传成功');
      } else if (res && res.message) {
        this.$message.error(res.message);
      } else {
        this.$message.error('上传失败，未知错误');
      }
    },
    beforeCommodityPicUpload(file) {
      const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; // 修改这一行
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPGorPNG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!'); // 修改这一行
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPGorPNG && isLt2M; // 修改这一行
    },
    /*新增商品*/
    addData(){
      this.$router.push({path:'/mallManagement/AddCommodity'})
    },
  },

  // Use the beforeCreate hook to initialize the 'end' property
  beforeCreate() {
    this.end = this.pageSize - 1;
  },

  mounted() {
    this.getDataList();
  }
}
</script>

<style scoped lang="scss">
@import "@/theme/common.css";
@import "@/theme/commonTable.css";
//复选框样式
:deep .el-checkbox__inner{
  border-radius: 50%;
}
:deep .el-checkbox__inner::after {
  transform: translate(-50%, -50%) scale(1) !important;
  width: 4px;
  height: 4px;
  border-radius: 50% !important;
  background-color: var(--el-color-white);
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transition: transform 0.15s ease-in;
}

</style>